<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row>
      <el-radio-group v-model="isLoanBack" @change="getList" size="mini">
        <el-radio-button label="1">借用单</el-radio-button>
        <el-radio-button label="2">归还单</el-radio-button>
      </el-radio-group>&nbsp;
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      <el-input placeholder="单号" clearable style="width: 240px;margin-left: 10px;" @keyup.enter.native=""
        v-model="queryParams.loanCode" size="mini" /> &nbsp;&nbsp;
      <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">查询</el-button>
    </el-row>

    <el-table :data="hList" v-loading="loading" @selection-change="handleSelectionChange" border
      style="margin-top: 5px;">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="loanBackId" width="55">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column label="单据状态" align="center" prop="loanCode" width="80" v-if="isLoanBack == 1">
        <template slot-scope="scope">
          <button class="but1" v-if="scope.row.receiptsStatus == 3">待审核</button>
          <button class="but2" v-if="scope.row.receiptsStatus == 2">已拒绝</button>
          <button class="but3" v-if="scope.row.receiptsStatus == 1">已审核</button>
          <button class="but4" v-if="scope.row.receiptsStatus == 4">已撤销</button>
          <button class="but5" v-if="scope.row.receiptsStatus == 5">归还中</button>
          <button class="but6" v-if="scope.row.receiptsStatus == 6">已归还</button>
          <button class="but2" v-if="scope.row.receiptsStatus == 7">归还失败</button>
        </template>
      </el-table-column>
      <el-table-column label="单据状态" align="center" prop="loanCode" width="80" v-else>
        <template slot-scope="scope">
          <button class="but1" v-if="scope.row.backStatus == 3">待审核</button>
          <button class="but2" v-if="scope.row.backStatus == 2">已拒绝</button>
          <button class="but3" v-if="scope.row.backStatus == 1">已审核</button>
          <button class="but4" v-if="scope.row.backStatus == 4">已撤销</button>
        </template>
      </el-table-column>
      <el-table-column :label="tableLoanType" align="center" prop="loanType">
        <template slot-scope="scope">
          <span v-if="scope.row.loanType == 3">供应商借用</span>
          <span v-if="scope.row.loanType == 2">外部联系人借用</span>
          <span v-if="scope.row.loanType == 1">内部借用</span>
        </template>
      </el-table-column>
      <el-table-column :label="tableLoanCode" align="center" prop="loanCode" width="170">
        <template slot-scope="scope">
          <span style="font-size: 12px;">{{scope.row.loanCode}}</span>
          <img class="img2" @click="flow(scope.row)" src="../../../assets/image/单据流水.png" />
        </template>
      </el-table-column>
      <el-table-column :label="tableCrew" align="center" prop="loanCrewName" />
      <el-table-column :label="tableLoanDate" align="center" prop="loanDate" width="100" v-if="isLoanBack == 1">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.loanDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="tableLoanDate" align="center" prop="loanDate" width="100" v-if="isLoanBack == 2">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.backCreateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="tableDept" align="center" prop="loanDeptName" />
      <el-table-column label="制单人" align="center" prop="creatorName" width="80" />
      <el-table-column label="制单时间" align="center" prop="createTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :min-width="110">
        <template slot-scope="scope">
          <el-button style="font-size: 11px;" type="text" @click="" @click="opneAudit(scope.row)"
            :disabled="scope.row.receiptsStatus != 3 || roles == 'common'" v-if="isLoanBack == 1">审核</el-button>
          <el-button style="font-size: 11px;" type="text" @click="" @click="opneAudit(scope.row)"
            :disabled="scope.row.backStatus != 3 || roles == 'common'" v-if="isLoanBack == 2">审核</el-button>
          <el-button style="font-size: 11px;" type="text" @click="hadReturn(scope.row)"
            v-if="scope.row.receiptsStatus == 1 && isLoanBack == 1">撤回</el-button>
          <el-button style="font-size: 11px;" type="text" @click="hadReturn(scope.row)"
            v-if="scope.row.backStatus == 1 && isLoanBack == 2">撤回</el-button>
          <el-button style="font-size: 11px;" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button style="font-size: 11px;" type="text" @click=""
            :disabled="scope.row.receiptsStatus != 1 && scope.row.receiptsStatus != 7" v-if="isLoanBack == 1"
            @click="backClick(scope.row)">归还</el-button>
          <el-button style="font-size: 11px;" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 借用归还对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body style="margin-left: 80px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="借用类型" prop="loanType">
              <el-select size="mini" v-model="form.loanType">
                <el-option v-for="item in loanTypeList" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借用部门" prop="deptId">
              <el-select v-model="form.deptId" @change="queryUsePerson" size="mini">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
                  :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="借用人员">
              <el-select v-model="loanCrew" size="mini">
                <el-option v-for="item in usePersonList" :key="item.userId" :label="item.nickName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放位置" prop="locationId">
              <el-select v-model="form.locationId" size="mini">
                <el-option v-for="item in locationList" :key="item.locationId" :label="item.locationName"
                  :value="item.locationId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借用日期" prop="loanDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.loanDate" size="mini"
                value-format="yyyy-MM-dd" style="width: 190px;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预计归还日期" prop="backDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.backDate" size="mini"
                value-format="yyyy-MM-dd" style="width: 190px;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button size="mini" @click="loanClear">清空</el-button>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="div-yj">
              <div>
                <el-table :data="loanList" border>
                  <el-table-column label="序号" align="center" prop="index" :min-width="50">
                    <template #default="scope">
                      {{scope.$index + 1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" :min-width="65">
                    <template #default="scope">
                      <div class="box_scope">
                        <img src="../../../assets/image/加.png" @click="add" />
                        <img src="../../../assets/image/减.png" @click="minus(scope.$index)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="选择资产" align="center" prop="xzasset" :min-width="120">
                    <!-- 使用作用域插槽自定义列内容 -->
                    <template slot-scope="scope">
                      <!-- 在作用域插槽内插入文本框 -->
                      <img class="img1" @click="open2Asset" src="../../../assets/image/搜索.png" />
                      <el-input :value="scope.row.assetCode"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="资产名称" align="center" prop="assetName" />
                  <el-table-column label="数量" align="center" prop="assetNum" />
                  <el-table-column label="金额" align="center" prop="price" />
                  <el-table-column label="规格" align="center" prop="asseSpec" />
                  <el-table-column label="型号" align="center" prop="model" />
                  <el-table-column label="报废日期" align="center" prop="scrapTime" />
                </el-table>

              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--选择资产-->
    <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="资产名称" maxlength="30" style="width: 200px;" v-model="asset.assetName" />&nbsp;
          <el-select placeholder="全部资产类型" v-model="asset.TypeId" clearable>
            <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
              :value="item.typeId"></el-option>
          </el-select>&nbsp;
          <el-select placeholder="全部存放位置" v-model="asset.locationId" clearable>
            <el-option v-for="item in locationList" :key="item.locationId" :label="item.locationName"
              :value="item.locationId"></el-option>
          </el-select>&nbsp;
          <el-button type="primary" icon="el-icon-search" size="mini" @click="open2Asset"
            style="height: 34px;">查询</el-button>
          <el-table :data="assetList" border style="padding-top: 10px;" @selection-change="assetSelectionChange"
            v-loading="loading1">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="资产名称" align="center" prop="assetName" />
            <el-table-column label="资产编码" align="center" prop="assetCode" :min-width="150" />
            <el-table-column label="资产类型" align="center" prop="typeName" />
            <el-table-column label="规格" align="center" prop="asseSpec" />
            <el-table-column label="型号" align="center" prop="model" />
            <el-table-column label="资产金额(元)" align="center" prop="price" />
            <el-table-column label="报废日期" align="center" prop="scrapTime" />
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <pagination class="fy" v-show="total2>0" :total="total2" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList()" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog :title="title4" :visible.sync="open4" width="620px" append-to-bod>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div>
          <el-form-item label="审核原因:" prop="nickName" style="height: 100px;">
            <el-input v-model="auditReason" type="textarea" maxlength="300" show-word-limit :rows="4"
              style="min-height: 100px;" v-if="isLoanBack == 1"> </el-input>
            <el-input v-model="auditReason" type="textarea" maxlength="300" show-word-limit :rows="4"
              style="min-height: 100px;" v-if="isLoanBack == 2"> </el-input>
          </el-form-item>
        </div>
        <div style="text-align: right;margin-top: 10px;">
          <el-button @click="cancel4">取 消</el-button>
          <el-button type="warning" @click="audit(2)">不通过</el-button>
          <el-button type="primary" @click="audit(1)">通过</el-button>
        </div>
      </el-form>
    </el-dialog>


    <!-- 单据流水 -->
    <el-dialog :title="title3" :visible.sync="open3" width="620px" append-to-bod v-if="isLoanBack == 1">
      <div
        style="width: 500px;height: 50px;border: 1px solid #006eff;margin-left: 50px;padding-left: 10px;background-color: #e6eff4;">
        <p><span>变更单号:&nbsp;</span><span style="font-weight: bold;">{{loanbackObj.loanbackCode}}</span></p>
      </div>
      <p></p>
      <div>
        <el-timeline>
          <el-timeline-item :timestamp="loanbackObj.createTime" placement="top" color="blue">
            <span style="font-weight: bold;font-size: 14px;">新增草稿单</span>
            <el-card>
              <h4 style="font-weight: bold;">经办人发起申请</h4>
              <p class="p1"><span>{{loanbackObj.creatorName}} </span><span>({{creatorDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="loanbackObj.auditDate" placement="top" :color="auditColor">
            <span style="font-weight: bold;font-size: 14px;">审核</span>
            <el-card>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 1">已同意</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 2">已拒绝</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 3">待审核</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 4">已撤销</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 5">归还中</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.receiptsStatus == 6">已归还</h4>
              <div style="width: 450px;height: 40px;border: 1px solid #e7e7e7;background-color: #f0f0f0;padding:8px;">
                意见说明 {{loanbackObj.auditReason}}
              </div>
              <p class="p1"><span></span><span>{{loanbackObj.auditName}}({{auditDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-button @click="cancel3()" style="margin-left: 485px;">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 单据流水 -->
    <el-dialog :title="title3" :visible.sync="open3" width="620px" append-to-bod v-if="isLoanBack == 2">
      <div
        style="width: 500px;height: 50px;border: 1px solid #006eff;margin-left: 50px;padding-left: 10px;background-color: #e6eff4;">
        <p><span>变更单号:&nbsp;</span><span style="font-weight: bold;">{{loanbackObj.loanbackCode}}</span></p>
      </div>
      <p></p>
      <div>
        <el-timeline>
          <el-timeline-item :timestamp="loanbackObj.backCreateDate" placement="top" color="blue">
            <span style="font-weight: bold;font-size: 14px;">新增草稿单</span>
            <el-card>
              <h4 style="font-weight: bold;">经办人发起申请</h4>
              <p class="p1"><span>{{loanbackObj.backCreatorName}} </span><span>({{creatorDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="loanbackObj.auditDate" placement="top" :color="auditColor">
            <span style="font-weight: bold;font-size: 14px;">审核</span>
            <el-card>
              <h4 style="font-weight: bold;" v-if="loanbackObj.backStatus == 1">已同意</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.backStatus == 2">已拒绝</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.backStatus == 3">待审核</h4>
              <h4 style="font-weight: bold;" v-if="loanbackObj.backStatus == 4">已撤销</h4>
              <div style="width: 450px;height: 40px;border: 1px solid #e7e7e7;background-color: #f0f0f0;padding:8px;">
                意见说明: {{loanbackObj.backAuditReason}}
              </div>
              <p class="p1"><span></span><span>{{loanbackObj.backAuditPersonName}}({{auditDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-button @click="cancel3()" style="margin-left: 485px;">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  import {
    listH,
    getH,
    delH,
    addH,
    addD,
    updateH,
    updateD,
    getTypeList,
    getusuPersonList,
    getEamList,
    deptByUserId,
    editUseStatus,
    updateAsset
  } from "@/api/eam-xl/loanBack";
  import {
    getInfo
  } from "@/api/login";

  export default {
    name: "loanBack",
    data() {
      return {
        // 遮罩层
        loading: true,
        loading1: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        total2: 0,
        // 借用归还表格数据
        hList: [],
        // 弹出层标题
        title: "",
        title2: "选择资产",
        title3: "单据流水",
        title4: "系统提示",
        // 是否显示弹出层
        open: false,
        open3: false,
        open2: false,
        open4: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          isLoanBack: undefined,
          loanCode: undefined,
          isdel: 1,
          isbackdel: undefined
        },
        isLoanBack: 1,
        // 表单参数
        form: {
          loanType: undefined,
          loanDept: undefined,
          loanCrew: undefined,
          locationId: undefined,
          loanDate: undefined,
          backDate: undefined,
          deptId: undefined,
          creator: undefined,
          receiptsStatus: undefined,
          auditReason: undefined,
          auditPerson: undefined,
          isdel: 1,
          isbackdel: undefined,
          backAuditPerson: undefined,
          backAuditPersonName: undefined,
          backAuditDate: undefined,
          backAuditReason: undefined
        },
        // 表单校验
        rules: {
          loanType: [{
            required: true,
            message: "请选择借用类型",
            trigger: "change"
          }],
          deptId: [{
            required: true,
            message: "请选择借用部门",
            trigger: "change"
          }],
          loanCrew: [{
            required: true,
            message: "请选择借用人员",
            trigger: "change"
          }],
          locationId: [{
            required: true,
            message: "请选择存放位置",
            trigger: "change"
          }],
          loanDate: [{
            required: true,
            message: "请选择借用日期",
            trigger: "change"
          }],
          backDate: [{
            required: true,
            message: "请选择预计归还日期",
            trigger: "change"
          }]
        },
        loanTypeList: [{
          "id": 1,
          "name": "内部借用"
        }, {
          "id": 2,
          "name": "外部联系人借用"
        }, {
          "id": 3,
          "name": "供应商借用"
        }],
        eamList: [],
        typeList: [],
        loanList: [{}], //领用单集合
        assetList: [], //资产集合
        locationList: [], //存放位置集合
        deptList: [], //部门集合
        usePersonList: [], //使用人员集合
        tableLoanType: "借用类型",
        tableLoanCode: "借用单号",
        tableCrew: "借用人",
        tableLoanDate: "借用日期",
        tableDept: "借用部门",
        asset: { //资产
          assetName: undefined,
          TypeId: undefined,
          locationId: undefined,
          useStatus: 4 //资产状态为闲置
        },
        user: {},
        loanbackObj: {},
        auditColor: undefined,
        creatorDeptName: undefined,
        auditDeptName: undefined,
        roles: undefined, //权限
        auditReason:undefined,
        loanCrew:undefined,
      };
    },
    watch: {

    },
    created() {
      this.getList();
      getTypeList().then((res) => {
        this.locationList = res.locationList;
        this.deptList = res.deptList;
        this.typeList = res.typeList;
      })
      getInfo().then((res) => {
        this.user = res.user;
        this.roles = res.roles;
      });
    },
    methods: {
      /** 查询借用归还列表 */
      getList() {
        this.loading = true;
        if (this.isLoanBack == 1) {
          this.queryParams.isdel = 1;
          this.queryParams.isbackdel = undefined;
          this.queryParams.isLoanBack = undefined;
          this.tableLoanType = "借用类型";
          this.tableLoanCode = "借用单号";
          this.tableCrew = "借用人",
            this.tableLoanDate = "借用日期",
            this.tableDept = "借用部门";
        } else {
          this.queryParams.isdel = undefined;
          this.queryParams.isbackdel = 1;
          this.queryParams.isLoanBack = 2;
          this.tableLoanType = "归还类型";
          this.tableLoanCode = "归还单号";
          this.tableCrew = "归还人",
            this.tableLoanDate = "归还日期",
            this.tableDept = "归还部门";
        }
        listH(this.queryParams).then(response => {
          this.hList = response.rows;
          if (this.queryParams.isLoanBack == 2) {
            this.hList.forEach((item, index) => {
              item.loanCode = item.loanCode.replace("JYD", "GHD");
            })
          }
          this.total = response.total;
          this.loading = false;
        });
      },
      cancel2() { //选择资产取消按钮
        this.open2 = false;
        this.asset = {};
        this.asset.useStatus = 4;
      },
      cancel3() {
        this.open3 = false;
        this.auditColor = "";
        this.loanbackObj = {};
      },
      cancel4() {
        this.open4 = false;
        this.form.auditReason = "";
        this.form.backAuditReason = "";
      },
      submit() { //选择资产确定按钮
        let _this = this;
        if (this.eamList.length > 0) {
          if (this.loanList[0].assetCode == null) {
            this.loanList = this.eamList;
          } else {
            if (this.loanList[this.loanList.length - 1].assetCode == null) {
              this.loanList.splice(this.loanList.length - 1, 1);
            }
            this.eamList.forEach((item, index) => {
              this.loanList.push(item);
            })
          }
        }
        this.loanList.forEach((item, index) => {
          this.assetList.forEach((item1, index1) => {
            if (item.assetId == item1.assetId) {
              _this.assetList.splice(index1, 1);
            }
          })
        })
        this.loanList.forEach((item, index) => {
          this.loanList.forEach((item1, index1) => {
            if (item1.assetId == null) {
              this.loanList.splice(index1, 1);
            }
          })
        })
        if (this.loanList.length == 0) {
          this.loanList = [{}];
        }
        this.open2 = false;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.form = {};
        this.loanCrew = null;
        this.form.deptId = undefined;
        this.loanList = [{}];
        this.usePersonList = [];
        this.$refs["form"].resetFields();
        this.reset();
      },
      // 表单重置
      reset() {

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.loanBackId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 提交按钮 */
      submitForm() {
        if (this.form.receiptsStatus == null) { //添加
          this.addLoanBack();
        } else { //修改
          if (this.roles == "common") {
            if (this.user.userId != this.loanCrew) {
              this.$message.warning("您没有此权限");
              _this.cancel(); //重置数据
              return;
            }
          }
          if (this.isLoanBack == 1) { //借用
            if (this.form.receiptsStatus == 1 || this.form.receiptsStatus == 5) {
              this.$message.warning(this.form.loanCode + "单号已处理，无法修改");
              _this.cancel(); //重置数据
              return;
            }
            if (this.form.receiptsStatus == 4) {
              this.form.receiptsStatus = 3;
            }
            if (this.form.receiptsStatus == 7) {
              this.form.receiptsStatus = 3;
              this.form.isbackdel = 0;
            }
          } else { //归还
            if (this.roles == "common") {
              if (this.user.userId != this.loanCrew) {
                this.$message.warning("您没有此权限")
                return;
              }
            }
            if (this.form.backStatus == 1) {
              this.$message.warning(this.form.loanCode + "单号已处理，无法修改");
              return;
            }
            if (this.form.backStatus == 4) {
              this.form.backStatus = 3;
            }
          }
          let _this = this;
          if (this.loanList[0].assetCode == null) {
            this.$message.warning("请选择需要借用的资产");
            return;
          }
          _this.$refs["form"].validate((valid) => { //添加表单验证
            if (valid) {
              _this.$modal.confirm('确认修改"' + _this.form.loanCode + '"借用单号的数据？').then(function() {
                _this.form.loanDept = _this.form.deptId;
                _this.form.loanCrew = _this.loanCrew;
                let obj = new Object();
                obj.eamLoanbackH = _this.form;
                obj.eamAssets = _this.loanList;
                //修改资产
                _this.loanList.forEach((item, index) => {
                  item.locationId = _this.form.locationId;
                  item.usePerson = _this.form.loanCrew;
                  item.useStatus = 101;
                })
                updateD(obj).then(res => {
                  _this.$message.success(res.msg); //修改成功
                  _this.cancel(); //重置数据
                  _this.getList(); //变更单列表初始化
                });
                //修改未选中资产状态
                _this.assetList.forEach((item, index) => {
                  item.locationId = "";
                  item.usePerson = "";
                  item.useStatus = 4; //闲置
                })
                editUseStatus(_this.assetList).then(res => {}) //批量修改
              })
            }
          })


        }
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('eam/loanBack/export', {
          ...this.queryParams
        }, `h_${new Date().getTime()}.xlsx`)
      },
      queryUsePerson() { //借用部门change绑定事件,按部门查询员工
        this.loanCrew = "";
        getusuPersonList(this.form).then(res => {
          this.usePersonList = res.userList;
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        //获取当前登录用户为创建人,制单人
        this.form = {};
        this.form.creator = this.user.userId;
        this.open = true;
        this.title = "新增借用单";
      },
      add() { //添加一行列表
        let loan = new Object();
        this.loanList.push(loan);
      },
      minus(index) { //删除一行列表
        if (this.loanList.length > 1) {
          this.assetList.push(this.loanList[index])
          this.loanList.splice(index, 1);
        }
      },
      loanClear() { //新增借用归还单清空借用集合，重新查询资产列表
        this.loanList = [{}];
        getEamList(this.asset).then(res => {
          this.assetList = res.rows;
        })
      },
      open2Asset() { //选择资产弹框 ,搜索图标按钮
        this.open2 = true;
        this.loading1 = true;
        if (this.loanList[0].assetId != null) {
          getEamList(this.asset).then(res => {
            this.assetList = res.rows;
            this.loanList.forEach((item, index) => {
              this.assetList.forEach((item1, index1) => {
                if (item.assetId == item1.assetId) {
                  this.assetList.splice(index1, 1);
                }
              })
            })
            this.loading1 = false;
          })
        } else {
          getEamList(this.asset).then(res => {
            this.assetList = res.rows;
            this.loading1 = false;
          })
        }
      },
      assetSelectionChange(selection) { //选择资产复选框事件
        this.eamList = selection
      },
      addLoanBack() { //添加借用或归还单
        let _this = this;
        if (this.loanList[0].assetCode == null) {
          this.$message.warning("请选择需要借用的资产");
          return;
        }
        if(this.loanCrew == 0){
          this.$message.warning("请选择借用人员");
          return;
        }
        this.form.loanCrew = this.loanCrew;
        this.$refs["form"].validate((valid) => { //添加表单验证
          if (valid) {
            _this.form.loanDept = _this.form.deptId;
            //修改资产
            _this.loanList.forEach((item, index) => {
              item.locationId = _this.form.locationId;
              item.usePerson = _this.form.loanCrew;
              item.useStatus = 101;
            })
            addH(_this.form).then((res) => {
              _this.$modal.msgSuccess(res.msg);
              _this.getList();
            }).then(() => {
              addD(_this.loanList);
              _this.cancel();
            })
          }
        })
      },
      backClick(row) { //归还点击按钮
        let _this = this;
        let obj = new Object();
        obj.loanCode = row.loanCode;
        obj.loanBackId = row.loanBackId;
        //将借用单据状态改为 归还中
        obj.receiptsStatus = 5;
        //归还单创建时间
        obj.backCreateDate = new Date().toLocaleString().replace(/上午|下午/g, "");
        //归还单创建人
        obj.backCreator = _this.user.userId;
        //将归还单据状态改为 待审核
        obj.backStatus = 3;
        //将isLoanBack改为 2 归还
        obj.isLoanBack = 2;
        obj.isbackdel = 1;
        if (this.roles != "common") { //判断角色 是否是普通用户
          this.$modal.confirm('确认归还 ' + row.loanCode + ' 单号的资产？').then(function() {
            updateH(obj).then(res => {
              _this.$message.success(res.msg);
              _this.getList();
            })
          })
        } else { //普通用户 是否是借用人归还
          if (this.user.userId != row.loanCrew) {
            this.$message.warning("您不能归还他人的资产");
          } else {
            //借用人归还
            this.$modal.confirm('确认归还 ' + row.loanCode + ' 单号的资产？').then(function() {
              updateH(obj).then(res => {
                _this.$message.success(res.msg);
                _this.getList();
              })
            })
          }
        }

      },
      opneAudit(row) { //打开审核界面dialog
        this.form = row;
        this.open4 = true;
      },
      audit(status) { //审核方法
        this.form.auditPerson = this.user.userId;
        //判断是借用还是归还
        if (this.isLoanBack == 1) { //借用
          this.form.auditReason = this.auditReason;
          this.form.receiptsStatus = status;
        } else { //归还
          this.form.backStatus = status;
          this.form.backAuditReason = this.auditReason;
          //审核时间
          this.form.backAuditDate = new Date().toLocaleString().replace(/上午|下午/g, "");
          this.form.backAuditPerson = this.user.userId;
          if (this.form.backStatus == 1) { //通过
            this.form.receiptsStatus = 6;
            //将资产归还，状态改为闲置
            this.form.loanbackDS.forEach((item, index) => {
              item.locationId = 1; //存入仓库
              item.useStatus = 4; //闲置
              item.usePerson = null;
            })
            updateAsset(this.form.loanbackDS);
          } else {
            this.form.receiptsStatus = 7;
          }
        }
        this.form.auditPerson = this.user.userId;
        this.form.auditDate = new Date().toLocaleString().replace(/上午|下午/g, "");
        this.open4 = false;
        updateH(this.form).then(res => {
          this.$message.success(res.msg);
          this.getList();
        })
        this.auditReason = "";
      },
      hadReturn(row) { //撤回领用单
        //单据状态必须是待审核才可以撤回
        if (this.roles == "common") {
          if (this.user.userId != this.loanCrew) {
            this.$message.warning("您没有此权限")
            return;
          }
        }
        let _this = this;
        if (this.isLoanBack == 1) { //借用撤回
          this.$confirm('是否撤回' + row.loanCode + "单号", '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //撤回
            row.receiptsStatus = 4;
            updateH(row).then((res) => {
              this.$message.success(res.msg);
              this.getList();
            })
          })
        } else { //归还
          this.$confirm('是否撤回' + row.loanCode + "单号", '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //撤回
            row.backStatus = 4;
            row.receiptsStatus = 1;
            updateH(row).then((res) => {
              this.$message.success(res.msg);
              this.getList();
            })
          })
        }

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        if (this.roles == "common") {
          if (this.user.userId != this.loanCrew) {
            this.$message.warning("您没有此权限")
            return;
          }
        }
        this.$confirm('是否删除' + row.loanCode + "单号", '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.isLoanBack == 1) {
            row.isdel = 0;
          } else {
            row.isbackdel = 0;
          }
          delH(row).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          })
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        let obj = {};
        getH(row.loanBackId).then(res=>{
          if (res.data.isLoanBack == 1) {
            this.title = "编辑借用单";
          } else {
            this.title = "编辑归还单";
          }
          obj.deptId = res.data.loanDept
          this.form = res.data;
          this.form.deptId = res.data.loanDept;
          this.loanList = res.data.loanbackDS;
          this.queryUsePerson(); //使用人员
          getusuPersonList(obj).then(res1 => {
            this.usePersonList = res1.userList;
            this.loanCrew = res.data.loanCrew;
          })
        })
        this.open = true;
      },

      //单据流水Dialog
      flow(row) {
        this.loanbackObj = row;
        let obj = new Object();
        if (this.isLoanBack == 1) { //借用
          if (row.receiptsStatus != 3) {
            this.auditColor = "blue";
          }
          obj.creatorId = row.creator;
          obj.auditId = row.auditPerson;
        } else { //归还
          if (row.backStatus != 3) {
            this.auditColor = "blue";
          }
          obj.creatorId = row.backCreator;
          obj.auditId = row.backAuditPerson;
        }
        // this.reset();
        deptByUserId(obj).then(res => {
          this.creatorDeptName = res.creatorDeptName;
          this.auditDeptName = res.auditDeptName;
        })
        this.open3 = true;
      },
    }
  };
</script>

<style>
  /* 单据状态 */
  .but1 {
    color: sandybrown;
    border-radius: 30px;
    font-size: 11px;
    background-color: #ffdcbc;
    border: 1px solid sandybrown;
  }

  .but2 {
    color: #aa3800;
    border-radius: 30px;
    font-size: 11px;
    background-color: #ff8d6a;
    border: 1px solid #ff8d6a;
  }

  .but3 {
    color: #4ab0f9;
    border-radius: 30px;
    font-size: 11px;
    background-color: #e6eff4;
    border: 1px solid #4ab0f9;
  }

  .but4 {
    color: #550000;
    border-radius: 30px;
    font-size: 11px;
    background-color: #d1d9dd;
    border: 1px solid #550000;
  }

  /* 归还中 */
  .but5 {
    color: #a9a26b;
    border-radius: 30px;
    font-size: 11px;
    background-color: #fff5a2;
    border: 1px solid #a9a26b;
  }

  /* 已归还 */
  .but6 {
    color: #8d91a6;
    border-radius: 30px;
    font-size: 11px;
    background-color: #d7dcfd;
    border: 1px solid #8d91a6;
  }

  /* 单据流水 */
  .img2 {
    height: 15px;
    display: block;
    margin-left: 140px;
    margin-top: -18.5px;
    cursor: pointer;
  }

  /* 搜索图片 */
  .img1 {
    height: 20px;
    position: absolute;
    z-index: 1;
    /* 设置图片的z-index值高于其他元素 */
    right: 15px;
    top: 18px;
    cursor: pointer;
    /* 将鼠标指针设置为手形 */
    transition: background-color 0.3s ease;
    /* 添加过渡效果 */
  }

  /* 入库单的加减图片 */
  .box_scope img {
    width: 18px;
    height: 18px;
    float: left;
    margin-left: 7px;
  }

  .box_scope img:hover {
    cursor: pointer;
  }
</style>
